<section [formGroup]="credentialsConfigFormGroup" fxLayout="column">
  <mat-expansion-panel class="tb-credentials-config-panel-group">
    <mat-expansion-panel-header>
      <mat-panel-title translate>tb.rulenode.credentials</mat-panel-title>
      <mat-panel-description>
        {{ credentialsTypeTranslationsMap.get(credentialsConfigFormGroup.get('type').value) | translate }}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <ng-template matExpansionPanelContent>
      <mat-form-field class="mat-block">
        <mat-label translate>tb.rulenode.credentials-type</mat-label>
        <mat-select formControlName="type" required>
          <mat-option *ngFor="let credentialsType of allCredentialsTypes" [value]="credentialsType" [disabled]="credentialsType === 'cert.PEM' && disableCertPemCredentials">
            {{ credentialsTypeTranslationsMap.get(credentialsType) | translate }}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="credentialsConfigFormGroup.get('type').hasError('required')">
          {{ 'tb.rulenode.credentials-type-required' | translate }}
        </mat-error>
      </mat-form-field>
      <section fxLayout="column" [ngSwitch]="credentialsConfigFormGroup.get('type').value">
        <ng-template ngSwitchCase="anonymous">
        </ng-template>
        <ng-template ngSwitchCase="basic">
          <mat-form-field class="mat-block">
            <mat-label translate>tb.rulenode.username</mat-label>
            <input required matInput formControlName="username">
            <mat-error *ngIf="credentialsConfigFormGroup.get('username').hasError('required')">
              {{ 'tb.rulenode.username-required' | translate }}
            </mat-error>
          </mat-form-field>
          <mat-form-field class="mat-block">
            <mat-label translate>tb.rulenode.password</mat-label>
            <input type="password" required matInput formControlName="password">
            <mat-error *ngIf="credentialsConfigFormGroup.get('password').hasError('required')">
              {{ 'tb.rulenode.password-required' | translate }}
            </mat-error>
          </mat-form-field>
        </ng-template>
        <ng-template ngSwitchCase="cert.PEM">
          <div class="tb-hint">{{ 'tb.rulenode.credentials-pem-hint' | translate }}</div>
          <tb-file-input formControlName="caCert"
                         inputId="caCertSelect"
                         [existingFileName]="credentialsConfigFormGroup.get('caCertFileName').value"
                         (fileNameChanged)="credentialsConfigFormGroup.get('caCertFileName').setValue($event)"
                         label="{{'tb.rulenode.ca-cert' | translate}}"
                         noFileText="tb.rulenode.no-file"
                         dropLabel="{{'tb.rulenode.drop-file' | translate}}">
          </tb-file-input>
          <tb-file-input formControlName="cert"
                         inputId="CertSelect"
                         [existingFileName]="credentialsConfigFormGroup.get('certFileName').value"
                         (fileNameChanged)="credentialsConfigFormGroup.get('certFileName').setValue($event)"
                         label="{{'tb.rulenode.cert' | translate}}"
                         noFileText="tb.rulenode.no-file"
                         dropLabel="{{'tb.rulenode.drop-file' | translate}}">
          </tb-file-input>
          <tb-file-input style="padding-bottom: 8px;"
                         formControlName="privateKey"
                         inputId="privateKeySelect"
                         [existingFileName]="credentialsConfigFormGroup.get('privateKeyFileName').value"
                         (fileNameChanged)="credentialsConfigFormGroup.get('privateKeyFileName').setValue($event)"
                         label="{{'tb.rulenode.private-key' | translate}}"
                         noFileText="tb.rulenode.no-file"
                         dropLabel="{{'tb.rulenode.drop-file' | translate}}">
          </tb-file-input>
          <mat-form-field class="mat-block">
            <mat-label translate>tb.rulenode.private-key-password</mat-label>
            <input type="password" matInput formControlName="password">
          </mat-form-field>
        </ng-template>
      </section>
    </ng-template>
  </mat-expansion-panel>
</section>
